<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/goods/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/goods/shouhou_add_address.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>

		<!-- <link rel="stylesheet" type="text/css" href="../css/goods/confirm_order.css" /> -->
		<link rel="stylesheet" href="../css/mui.picker.min.css">
		<script type="text/javascript">
			(function() {
				var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
				clientWidth = clientWidth || localStorage.getItem("clientWidth")
				if(clientWidth > 750)
					clientWidth = 750;
				document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
			})();
		</script>
		<style type="text/css">
			.code_box{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height:100%;
				opacity: 1;
				background-color: rgba(0,0,0,0.7);
			}
			.code_view{
				width: 6.5rem;
				height:  6.5rem;
				margin-left: 5rem;
				background-color: #000;
				margin-top: 10rem;
			}
			.code_box .mui-btn{
				display: block;
				margin: 0 auto;
				margin-top: 20px;
				width:80px;
			}
		</style>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
			<a class="mui-action-back mui-icon  mui-pull-left arr_left">
			</a>
			<h1 class="mui-title">填写退货物流</h1>
			<a class="mui-pull-right" onclick="app.sub_this()">提交</a>
		</header>
		<div class="mui-content">
			<div class="hr_20"></div>
			<div class="address_form">
				<!--<div class="text_row_100"  @click="select_express">
					<span class="fl fs_28">物流公司 :</span>
					<input class="fl fs_24 input" v-model="wlgs" disabled="disabled" type="text" placeholder="请选择物流公司" />
					<i class="fr mui-icon mui-icon-arrowright icon"></i>
				</div>-->
				<!--<div class="text_row_100">
					<span class="fl fs_28">物流单号 :</span>
					<input class="fl fs_24 input" v-model="wldh"  type="text" placeholder="请填写物流单号" />
					<i class="fr iconfont icon-qr "@click="get_code"></i>
				</div>-->
				<div class="text_row_100">
					<span class="fl fs_28">联系电话 :</span>
					<input class="fl fs_24 input" v-model="lxdh" type="text" placeholder="请输入联系方式" />

				</div>
		 
				<div class="text_row_100">
					<span class="fl fs_28">退货说明 :</span>
					<input class="fl fs_24 input" v-model="thsm" type="text" placeholder="选填" />

				</div>
				<div class="hr_20"></div>
				<div class="imgs">
					<div class="text_row_80" style="border: none;">上传凭证</div>
					<div id="has_img">

						<div class="img_item" v-for="(i,k) in imgs">
							<div class="has_img"><img :src="i.pic" /></div>

							<i class="mui-icon mui-icon-closeempty" @click="del_this(k)"></i>
						</div>

					</div>
					<div class="img_item add_img" @click="open_pic" v-show="add_img_flag">
						<i class="iconfont icon-paizhao"></i>
						<div class="fs_20">最多三张</div>
					</div>
 
				</div>

			</div>
			<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
				<!-- 可选择菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" id="paizhao">
						<a href="#">拍照</a>
					</li>
					<li class="mui-table-view-cell" id="xiangce">
						<a href="#">相册</a>
					</li>
				</ul>
				<!-- 取消菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#sheet1"><b>取消</b></a>
					</li>
				</ul>
			</div>
			
			<div class="code_box" :style="'z-index:'+code_box_z_index+' ;'" >
				<div class="code_view" id="code_view"></div>
				
				<div class="mui-btn " @click="code_close">取消</div>
			</div>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tools/upload_img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var scan = null; //全局扫码对象
			
			/*
			 
			 * 20180629
			 * 添加了手机号和上传凭证的正则
			 * 添加了物流公司选择功能
			 * */
			var picker = new mui.PopPicker();

			var app = new Vue({
				el: ".mui-content",
				data: {
					imgs: [],
					add_img_flag: true,
					wlgs:'',
					wldh:'',
					lxdh:'',
					thsm:'',
					plusReady:false,
					show_code_box:false,//是否显示扫描
					code_box_z_index:-1,//扫描层级
					orderid:'',
					user:'',
				},
				methods: {
					open_pic: function() {
						mui('#sheet1').popover('toggle');
					},
					get_code:function(){
						console.log("get_code")
						var that = this;
						if(this.plusReady){
							this.code_box_z_index = 10;
							get_code(function(res){
								that.wldh = res
							})
						}
						
					},
					code_close:function(){
						console.log("code_close")
						this.code_box_z_index = -1;
						scan.close();
					},
					get_img: function() {
						mui.toast('拍照');
						mui('#sheet1').popover('hide');

						//上传成功后
						this.imgs.push({
							pic: '../images/index_g4.png'
						});
						if(this.imgs.length >= 3) {
							this.add_img_flag = false;
						}

					},
					sel_img: function() {
						mui.toast('相册')
						mui('#sheet1').popover('hide');
					},
					del_this: function(k) {
						this.imgs.splice(k, k + 1)
					},
					sub_this: function() {
						
						if(!util.testPhone(this.lxdh)){
							mui.toast("请输入正确的手机号")
							return;
						}
						
						if(!this.imgs.length>=1){
							mui.toast("请上传凭证")
							return;
						}
						
						mui.toast("提交")
						
						$.ajax({
							type:"post",
							url:"https://zhapp.4hl.cn/app/Order/tuihuo",
							data:{
								orderid:this.orderid,
								content:this.thsm,
								uid:this.user.uid,
								phone:this.lxdh,
								imgs:this.imgs
							},
							success:function(res){
								res = JSON.parse(res);
								if(res.code==1){
									mui.toast("提交成功");
									setTimeout(function(){
										plus.webview.currentWebview().close()
									},500)
								}
							},
							error:function(err){
								alert(err)
							}
						});
//						mui.alert('物流公司->'+this.wlgs)
//						mui.alert('物流单号->'+this.wldh)
//						mui.alert('联系电话->'+this.lxdh)
//						mui.alert('退货说明->'+this.thsm)
//						mui.alert('图片集合->'+this.imgs)
					},
					select_express:function(){
						var that = this;
						picker.show(function(item){
							console.log(item);
							 
							that.wlgs = item[0].text;
						})
					}
				},
				created:function(){
					var that = this;
					mui.plusReady(function(){
						that.plusReady = true;
					})
					var orderid = util.GetQueryString("orderid");
					if(orderid){this.orderid = orderid}
					var user = localStorage.getItem("user")
					if(user){user = JSON.parse(user)};
					this.user = user;
					
				},
				mounted: function() {
					
					var that = this;
					ts.select_img('xiangce', function(path) {
						mui.toast("上传成功")
						mui('#sheet1').popover('hide');
						that.imgs.push({
							pic: path
						});
						if(that.imgs.length >= 3) { //控制上传图片数量
							that.add_img_flag = false;
						}
					});
					ts.get_img('paizhao', function(path) {
						mui.toast("上传成功")
						mui('#sheet1').popover('hide');
						that.imgs.push({
							pic: path
						});
						if(that.imgs.length >= 3) { //控制上传图片数量
							that.add_img_flag = false;
						}
					});
					
					
					//初始化 物流公司选择数据
					picker.setData([{
						value: "first",
						text: "顺丰"
					}, {
						value: "second",
						text: "韵达"
					}, {
						value: "third",
						text: "圆通"
					}, {
						value: "fourth",
						text: "中通"
					}, {
						value: "fifth",
						text: "邮政"
					}])
				}
			})
			
			
			function get_code(callback){
					 
					function onmarked(type, result) {
						var text = '未知: ';
						switch(type) {
							case plus.barcode.QR:
								text = 'QR: ';
								break;
							case plus.barcode.EAN13:
								text = 'EAN13: ';
								break;
							case plus.barcode.EAN8:
								text = 'EAN8: ';
								break;
						}
						// alert(text + result);
						app.code_close()
						callback(result)
						closeScan()
					}
					startRecognize()
					
					function startRecognize() {
						
						scan = new plus.barcode.Barcode('code_view');
						scan.onmarked = onmarked;
						startScan()
					}
					//开始条码识别
					function startScan() {
						scan.start();
						console.log("开始条码识别")
					}
					//结束条码识别
					function cancelScan() {
						scan.cancel();
						 
					}
					//是否开启闪光灯
					function setFlash() {
						scan.setFlash();
					}
					
					function closeScan() {
						scan.close();
					}
			}
		</script>
	</body>

</html>